<template>
  <el-carousel indicator-position="outside" >
    <el-carousel-item v-for="(scroll,scrollIndex) in scrolls" :key="scrollIndex">
      <h3><a href="#"><img :src="getImgUrl(scroll.imgsrc)" height="320px" width="1000px"/></a></h3>
    </el-carousel-item>
  </el-carousel>
</template>


<script>
  import api from "../../../../axios/api"

  export default {
    name: "scrolls",
    data() {
      return {
        scrolls: []
      }
    },
    methods: {
      getImgUrl: function (imgsrc) {
        return "../../../static/images/matchType" + "/" + imgsrc;
      },
      setDataFromAxios: function () {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/scrolls", null, "post")
          .then(res => {
            this.scrolls = res.scrolls;
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        console.log(this.scrolls)
      }
    },
    created() {
      this.setDataFromAxios();
    }
  }
</script>

<style scoped lang="stylus">
  .el-carousel__item h3 {
    width auto
    height 230px
    font-size: 18px;
    line-height: 300px;
    margin: 0;
  }
</style>
